<template>
    <div class="supplier-home">
      <div class="supplier-header">
        <img :src="supplier.logo" class="supplier-logo" />
        <div class="supplier-info">
          <h2>{{ supplier.name }}</h2>
          <p>{{ supplier.desc }}</p>
        </div>
      </div>
      <div class="supplier-products">
        <h3>主营产品</h3>
        <el-row :gutter="20">
          <el-col :span="6" v-for="prod in supplier.products" :key="prod.id">
            <div class="product-card">
              <img :src="prod.img" class="product-img" />
              <div class="product-name">{{ prod.name }}</div>
              <div class="product-price">￥{{ prod.price }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </template>
  
  <script>
  const supplierMockData = [
    {
      id: 1,
      name: '新疆农六师',
      desc: '新疆农六师国投生有限公司，主营优质农产品及相关服务。',
      logo: 'https://static.zibovip.top/imgs/2025/04/7717a8407e297dfa.jpg',
      products: [
        { id: 1, name: '优质棉花', img: 'https://static.zibovip.top/imgs/2025/04/7717a8407e297dfa.jpg', price: 5000 },
        { id: 2, name: '棉纱', img: 'https://static.zibovip.top/imgs/2025/04/3090e15d58201f49.jpg', price: 8000 }
      ]
    },
    {
      id: 2,
      name: '山东信发',
      desc: '山东信发进出口有限公司，专注于金属材料出口。',
      logo: 'https://static.zibovip.top/imgs/2025/04/3090e15d58201f49.jpg',
      products: [
        { id: 1, name: '铝锭', img: 'https://static.zibovip.top/imgs/2025/04/0947c93c7685f6d5.jpg', price: 18000 }
      ]
    },
    {
      id: 3,
      name: '东方希望',
      desc: '包头东方希望铝业合作有限公司，主营铝制品。',
      logo: 'https://static.zibovip.top/imgs/2025/04/0947c93c7685f6d5.jpg',
      products: [
        { id: 1, name: '铝棒', img: 'https://static.zibovip.top/imgs/2025/04/0947c93c7685f6d5.jpg', price: 20000 }
      ]
    }
  ];
  
  export default {
    data() {
      return {
        supplier: {
          id: '',
          name: '',
          desc: '',
          logo: '',
          products: []
        }
      };
    },
    created() {
      // 获取路由参数 id
      const id = Number(this.$route.query.id);
      const found = supplierMockData.find(item => item.id === id);
      if (found) {
        this.supplier = found;
      } else {
        this.supplier = {
          id: '',
          name: '未知商家',
          desc: '暂无简介',
          logo: '',
          products: []
        };
      }
    }
  };
  </script>
  
  <style scoped>
  .supplier-home {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    margin: 30px auto;
    max-width: 1000px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  }
  .supplier-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
  }
  .supplier-logo {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    object-fit: cover;
    margin-right: 30px;
    background: #f5f7fa;
  }
  .supplier-info h2 {
    margin: 0 0 10px 0;
  }
  .supplier-products {
    margin-top: 20px;
  }
  .product-card {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  }
  .product-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin-bottom: 10px;
  }
  .product-name {
    font-weight: 600;
    margin-bottom: 5px;
  }
  .product-price {
    color: #ff6200;
    font-weight: bold;
  }
  </style>